<template>
  <div class="switch_img_wrap">
    <div
      @click.stop="emits('itemEvent', { event: $event, prop, scope, row })"
      :class="`switch_img ${getClassName}`"
      :style="attrs?.style || ''"
    >
      <b></b>
    </div>
  </div>
</template>
<script setup>
import _ from 'lodash';

const attrs = useAttrs();

const emits = defineEmits(['itemEvent']);

const props = defineProps({
  prop: {
    type: String,
    default: '',
  },
  scope: {
    type: Object,
    default: () => {
      return {};
    },
  },
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const getClassName = computed(() => {
  let classStr = '';
  const { className, classNameFn, size } = attrs;
  if (className) classStr += ' ' + className;
  if (size) classStr += ' switch_img_size_' + size;
  if (classNameFn && _.isFunction(classNameFn)) {
    let flag = classNameFn(props.row);
    classStr += ' ' + flag;
    return classStr;
  }
  return classStr;
});
</script>
<style lang="scss" scoped>
.switch_img_wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switch_img {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: var(--el-border-color);
  padding: 1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;

  b {
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
  }
}

.switch_img_true {
  background: var(--el-color-primary);
  justify-content: flex-end;
}

.switch_img_size_large {
  width: 50px;
  height: 24px;
  border-radius: 12px;
  padding: 2px;
  b {
    width: 20px !important;
    height: 20px !important;
  }
}
.switch_img_size_small {
  width: 30px;
  height: 16px;
  border-radius: 8px;
  padding: 1px;
  b {
    width: 14px !important;
    height: 14px !important;
  }
}
</style>
